<template>
  <view class="page">
    <CommonNavbar :showBack="true"></CommonNavbar>
    <view class="margin-top padding-lr">
      <up-text
        text="请选择小朋友今天的心情"
        size="18"
        color="black"
        bold
      ></up-text>
    </view>

    <view class="main padding-0 margin-top">
      <up-grid
        :border="false"
        @click="selectStatus"
      >
        <up-grid-item
          v-for="(item, index) in MOOD_LIST"
          :key="index"
        >
          <view
            class="padding-lr padding-bottom-sm margin-top-sm radius"
            :class="currentStatus.id === index + 1 ? 'bg-white' : ''"
          >
            <up-icon
              :name="item.url"
              :size="66"
            ></up-icon>
            <up-text
              :text="item.title"
              size="12"
              :customStyle="{ paddingTop: 4 + 'rpx' }"
              align="center"
            ></up-text>
          </view>
        </up-grid-item>
      </up-grid>
    </view>
    <view class="footer">
      <up-button
        type="primary"
        text="他感到很棒"
        :disabled="currentStatus.id === 0"
        @click="submit"
      ></up-button>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
import MOOD_LIST from '@/utils/constant';
const instance = getCurrentInstance().proxy;
const currentStatus = ref(0);
const eventChannel = ref(null);
// const moodList = reactive([
//   {
//     title: '爱慕',
//     id: 1,
//     url: '/static/images/mood/1.png'
//   },
//   {
//     title: '生气',
//     id: 2,
//     url: '/static/images/mood/2.png'
//   },
//   {
//     title: '幸福',
//     id: 3,
//     url: '/static/images/mood/3.png'
//   },
//   {
//     title: '冠军',
//     id: 4,
//     url: '/static/images/mood/4.png'
//   },
//   {
//     title: '加油',
//     id: 5,
//     url: '/static/images/mood/5.png'
//   },
//   {
//     title: '平静',
//     id: 6,
//     url: '/static/images/mood/6.png'
//   },
//   {
//     title: '不明',
//     id: 7,
//     url: '/static/images/mood/7.png'
//   },
//   {
//     title: '大哭',
//     id: 8,
//     url: '/static/images/mood/8.png'
//   },
//   {
//     title: '不高兴',
//     id: 9,
//     url: '/static/images/mood/9.png'
//   },
//   {
//     title: '开心',
//     id: 10,
//     url: '/static/images/mood/10.png'
//   },
//   {
//     title: '得意',
//     id: 11,
//     url: '/static/images/mood/11.png'
//   },
//   {
//     title: '疑问',
//     id: 12,
//     url: '/static/images/mood/12.png'
//   },
//   {
//     title: '难过',
//     id: 13,
//     url: '/static/images/mood/13.png'
//   }
// ]);
onMounted(() => {
  eventChannel.value = instance.getOpenerEventChannel();
});
const selectStatus = (index) => {
  console.log(index);
  currentStatus.value = MOOD_LIST[index];
};
const submit = () => {
  eventChannel.value.emit('updataEmits', { data: currentStatus.value });
  // 返回父页面
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.page {
  background: #f4f4f6;
}
</style>
